<template>
    <div class="clickfirst" id="imageDialog">
        <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
        <div style="position: relative;overflow: hidden;" @click="dialogVisibleLog = true">
            <div class="litteBoard">
            <div class="el-upload el-upload--picture-card" v-show="true">

                <i class="el-icon-plus"></i>

            </div>
        </div>
            <div v-show="storeImage.length != 0">
                <img :src="firstImage()" alt="" style="position: absolute; top: 0; left: 0; width: 100%; height: 120px;" onerror="this.src='/error.jpeg';">
            </div>
            <div class="numDisplaySecond" v-show="storeImage.length != 0">
                <div style="margin-top: 5px;margin-left: 40%;">
                 {{ storeImage.length }}
               </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisibleLog" width="1040px" :before-close="handleClose" class="dilogBoard">

            <div slot="title" class="dialog-title">
                <div class="titleFlex">
                    <div class="titleIcon"></div>
                    <div>{{ flieName }}</div>
                </div>
            </div>
            <div style="display: flex;" class='sampleStyle'>
                <div style="position: relative;">
                    <div class="demo-image__preview">
                        <el-image v-show="firstIsShow()"
                        class="sampleImage"
                            :src="sampleImageFirst()" :preview-src-list="sampleImageAllFirst()">
                            <div slot="error" class="image-slot">
                                <img src="../../assets/images/stageIcon/加载失败.jpeg" alt="" style="width: 100%;height: 100%;">
                            </div>
                        </el-image>
                        <img v-show="isSHow()" src="../../assets/images/stageIcon/暂无图片.png" alt=""
                            style="width: 200px; height: 200px;margin-left: 30px;margin-right: 30px;">
                    </div>
                    <div class="overlay" v-show="firstIsShow()">范例图</div>
                </div>
                <el-upload :action="VUE_APP_BASE_API + '/file/project/upload'"
                    :headers="{ Authorization: 'Bearer ' + token }" list-type="picture-card"
                    :data="{ path: upAddress, projectId: projectInfo.projectId, id: id }" ref="fileUpload"
                    :file-list="fileList" :on-preview="handlePictureCardPreview" :on-success="handleUploadSuccess" multiple drag>
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>

                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>

                        </span>
                    </div>
                </el-upload>

            </div>
            <!-- <el-row :gutter="12">
                <el-col :span="12" v-for="(item, index) in storeImage" :key="index" style="margin-top: 10px;">
                    <el-card shadow="never" style="display: flex;" :body-style="{ padding: '10px' }">
                        <div style="height: 170px;">
                            <div style="width: 100%;height: 140px;display: flex; ">
                                <img :src="$myGlobalVariable + item.source" alt=""
                                    style="width: 130px;height: 138px;margin-right: 10px;" v-if="item.type == true"
                                    @click="lookImage($myGlobalVariable + item.source)" onerror="this.src='/error.jpeg';">
                                <img src="../../assets/images/stageIcon/视频播放.png"
                                    style="width: 130px;height: 138px;margin-right: 10px;" v-if="item.type == false"
                                    @click="controllDilogStatus($myGlobalVariable + item.source)">
                                <el-input type="textarea" v-model="contentValue[index]" :rows="6"
                                    style="width: 236px;height:150px;overflow: auto;"
                                    resize="none" placeholder="请输入">调压输出管道：埋地、穿墙进入地下一层的室内，由于沉降无法观察形变，有较大的隐患。</el-input>
                            </div>
                            <div class="btn_three" style="float: right;margin-top: 10px;">
                                <el-button slot="reference" @click="remove(index)" icon="el-icon-delete">删除</el-button>
                            </div>
                            <div class="btn_second" style="float: right;margin-top: 10px;">
                                <el-button slot="reference"  icon="el-icon-download" style="margin-right: 10px;" @click="download(index)">下载</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row> -->

            <div class="imageAndDescript">
                <div class="imageAndDescriptChild" v-for="(item, index) in storeImage" :key="index">
                    <div class="imageChild">
                        <img :src="$myGlobalVariable + item.source" alt="" v-if="item.type == true"
                            @click="lookImage($myGlobalVariable + item.source)" onerror="this.src='/error.jpeg';">
                        <img src="../../assets/images/stageIcon/视频播放.png"
                             v-if="item.type == false"
                            @click="controllDilogStatus($myGlobalVariable + item.source)">
                    </div>
                    <el-input type="textarea" v-model="contentValue[index]" :rows="3" resize="none" style="width:300px"
                        placeholder="请输入"></el-input>
                    <div class="btn_three" style="float: right;margin-top: 10px;">
                        <el-button slot="reference" @click="remove(index)" icon="el-icon-delete">删除</el-button>
                    </div>
                    <div class="btn_second" style="float: right;margin-top: 10px;">
                        <el-button slot="reference" icon="el-icon-download" style="margin-right: 10px;"
                            @click="download(index)">下载</el-button>
                    </div>
                </div>

            </div>


            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>


            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisibleLog = false">取 消</el-button> -->
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="提示" :visible.sync="close" width="1600px" >
            <video width="100%" :src="playMedio" style=",height: 750px;" controls></video>

        </el-dialog>
        <el-dialog :visible.sync="imageClose" width="1600px">
            <img style="max-height: 750px;max-width: 100%;" :src="imagePlay" onerror="this.src='/error.jpeg'" />
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { getImage, controllPressureDevice, reViewControllPressureDevice, removeImage } from "@/api/project/stageApi";
export default {
    mounted() {



    },
    props: ['upAddress', 'projectInfo', 'id', 'description', 'dictName', 'classNum', 'sampleImageAll','imageIndex','flieName'],
    computed: {

    },
    watch: {
        sampleImageAll: {
            handler(newData, oldData) {
            
                this.sampleImage = newData

            },
            immediate: true
        },
        upAddress: {
            handler(newData, oldData) {



            },
            immediate: true
        },
        id: {
            handler(newData, oldData) {

                this.myMethod()


            },
            immediate: true
        },
        projectInfo: {
            handler(newData, oldData) {


            },
            immediate: true
        },
        dictName: {
            handler(newData, oldData) {

            },
            immediate: true
        }


    },
    data() {
        return {

            imagePlay: '',
            imageClose: false,
            playMedio: '',
            close: false,
            contentValue: [],
            storeImage: [],
            sampleImage: [],
       
            //所有图片的地址
            fileList: [],
            upSuccess: 0,
            token: getToken(),
            dialogVisibleLog: false,
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false
        };
    },
    name: 'imageLookFourth',
    methods: {
        download(index){
        let address = this.storeImage[index].source
      let imageUrl = address; // 图片地址
      // 创建一个a标签
      let link = document.createElement('a');
      link.href = imageUrl;
      link.download = ''+this.flieName+'.jpg'; // 下载的文件名
      // 模拟点击下载
      link.click();
        },
        lookImage(address) {
            this.imageClose = true
            this.imagePlay = address
        },
        controllDilogStatus(index) {

            this.close = true
            this.playMedio = index
        },
        firstIsShow(){
            if (this.sampleImage[this.imageIndex].imageAddress.length>0){
                return true
            }
            return false
        },
        isSHow(){
            if (this.sampleImage[this.imageIndex].imageAddress.length==0){
                return true
            }
            return false
        },
        firstIsShow(){
            if (this.sampleImage[this.imageIndex].imageAddress.length>0){
                return true
            }
            return false
        },
        isSHow(){
            if (this.sampleImage[this.imageIndex].imageAddress.length==0){
                return true
            }
            return false
        }
        ,
        sampleImageFirst() {

            if (this.sampleImage.length == 0) {
                return ''
            }
            
            return this.sampleImage[this.imageIndex].imageAddress[0]
        },
        sampleImageAllFirst() {
            if (this.sampleImage.length == 0) {
                return sampleImage
            }
            return this.sampleImage[this.imageIndex].imageAddress
        },
        firstImage() {
            if (this.storeImage.length == 0) {
                return ''
            }
            if (this.storeImage[0]!=null){
            
            let type =  this.isVideoOrImage(this.storeImage[0].source)
            
            if (type=='video'){
            
              return require(`../../assets/images/stageIcon/视频播放.png`)
            }
              
          }
            return this.$myGlobalVariable + this.storeImage[0].source
        },
        remove(index) {
            let address = this.storeImage[index].source
            this.storeImage.splice(index, 1)
            this.contentValue.splice(index, 1)
            this.submitDescript()
            removeImage(address, this.projectInfo.projectId).then(response => {

            })

        },
        isVideoOrImage(url) {
            var videoExtensions = ['mp4','mov','avi','wmv','mpg','mpeg','rm','ram','swf','flv'];
            var imageExtensions =  ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jfif','tif','pcx','tga','exif','fpx','svg','psd','cdr','pcd','dxf','ufo','eps','ai','raw','wmf','webp','avif','apng'];

            var extension = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
            
            if (videoExtensions.includes(extension)) {
                return 'video';
            } else if (imageExtensions.includes(extension)) {
                return 'image';
            } else {
                return 'unknown';
            }
        },
        ///确定按钮
        confirm() {
            this.dialogVisibleLog = false
            this.submitDescript()
        },
        ///提交描述
        submitDescript() {
            let stageSurvey = { projectId: this.projectInfo.projectId, id: this.id }
            stageSurvey[this.dictName] = this.contentValue
            reViewControllPressureDevice(stageSurvey).then(response => {
                if (response.code == 200) {

                }
            })
        },
        ///获取描述
        getDescription() {


            controllPressureDevice(this.projectInfo.projectId).then(response => {
                if (response.code == 200) {

                    for (let i = 0; i < response.data.length; i++) {
                        if (response.data[i].id == this.id) {

                            this.contentValue = response.data[i][this.dictName]

                        }
                    }

                }
            })

        },
        ///查询图片和描述
        myMethod() {

            this.storeImage = []
            this.contentValue = []
            // 在这里执行你想要的操作
            getImage(this.projectInfo.projectId, this.id, this.upAddress).then(response => {
                if (response.code == 200) {
                    for (let i = 0; i < response.data.length; i++) {
                        let dict;

                        switch (this.isVideoOrImage(response.data[i])) {
                            case 'video':
                                dict = { source: response.data[i], type: false }
                                break
                            case 'image':
                                dict = { source: response.data[i], type: true }
                                break
                            default:
                                dict = { source: 'error', type: true }
                        }
                        this.storeImage.push(dict)
                    }


                }
            })
            this.getDescription()
        },
        handleUploadSuccess(response, file, fileList) {
            if (fileList.every(item => item.status == "success")) {
                // 在上传成功后执行的操作
                // 执行其他逻辑
                
                if (response.code == 200) {
                    response.data.splice(0,response.data.length-fileList.length)
                    response.data.forEach(name => {
                        let dict;
                        switch (this.isVideoOrImage(name)) {
                            case 'video':
                                dict = { source: name, type: false }
                                break
                            case 'image':
                                dict = { source: name, type: true }
                                break
                            default:
                                dict = { source: name, type: true }
                        }

                        this.storeImage.push(dict)

                        this.contentValue.push('')
                    });

                    ///上传任务
                    this.submitDescript()
                }
                this.$refs.fileUpload.clearFiles()
            }
        },
        sendDescription() {
            this.$emit('updataContent', this.contentValue)




        },
        handleClose(done) {
            ///上传任务
            this.submitDescript()
            this.dialogVisibleLog = false
        },
        handleRemove(file) {

        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
    }
};
</script>
<style >
.addImage {
    width: 150px;
    height: 150px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.16);
    border: 1px solid #DCDFE6;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>